<template>
  <n-card :bordered="false">
    <n-alert :show-icon="false" class="m-b-10">
      <n-form :model="searchParam" class="search-forms"
              inline
              :show-feedback="false"
              label-placement="left"
              @keydown.enter.prevent="handleSubmitSearch">
        <n-form-item>
          <n-input v-model:value="searchParam.key" placeholder="输入用户昵称或电话查询" style="width: 280px"
                   clearable/>
        </n-form-item>
        <n-form-item>
          <search-button-group @submit="handleSubmitSearch"
                               @reset="()=>(searchParam.key=null)"/>
        </n-form-item>
      </n-form>
    </n-alert>
    <data-table ref="data_list" :columns="columns"
                :row-key="(row:Recordable) => row.id"
                :params="searchParam"
                :action-column="searchParam.status==1?actionColumn:{}"
                list-url="user/vip_list"
                default-serial-number
                serial-number-title="序号">
      <template #toolbarLeft>
        <n-space>
          <n-button-group>
            <n-button :type="searchParam.status==1?'primary':'default'"
                      @click="()=>(searchParam.status=1,handleSubmitSearch())">启用
            </n-button>
            <n-button :type="searchParam.status==0?'primary':'default'"
                      @click="()=>(searchParam.status=0,handleSubmitSearch())">停用
            </n-button>
          </n-button-group>
        </n-space>
      </template>
    </data-table>
  </n-card>
</template>
<script setup lang="ts">
import {h, ref, reactive} from 'vue';
import SearchButtonGroup from '@components/SearchButtonGroup';
import DataTable from "@components/DataTable";
import {NImage, NPopconfirm, NEllipsis, NTag, useMessage, NAvatar} from "naive-ui";
import {Config} from "@/config";
import DataTableAction from '@components/DataTable/src/components/DataTableAction';
import {postPutRequest} from "@/api/data.ts";

const message = useMessage()
const searchParam = ref<null | string | any>({
  key: null,
  status: 1,
})

const data_list = ref<any>();
const columns = ref([
  {
    title: '头像',
    key: 'avatar',
    width: 60,
    align: 'center',
    render(row: { avatar: string }) {
      if (row.avatar) {
        return h(NAvatar, {
          size:30,
          src:  Config.VIEW_FILE + row.avatar
        })
      }
    }
  }, {
    title: '昵称/电话',
    key: 'nickname',
    width: 150,
    render: (row: { nickname: string, phone: string }) => {
      return h('div', {style: {width: '100%'}}, {
        default: () => (
            [h(NEllipsis, {style: {display: 'block'}}, {default: () => (row.nickname)}),
              h('span', null, {default: () => (row.phone)})
            ])
      })
    }
  }, {
    title: 'VIP名称',
    key: 'name',
    width: 150
  }, {
    title: 'VIP类型',
    key: 'typeText',
    width: 100,
    align: 'center'
  },
  {
    title: '状态',
    key: 'status',
    width: 80,
    align: 'center',
    render(row: { status: boolean | number }) {
      const enabled_color = row.status ? 'success' : 'warning';
      const enabled_text = row.status ? '启用' : '停用';
      return h(NTag,
          {
            type: enabled_color,
          },
          {
            default: () => (enabled_text),
          }
      );
    }
  }, {
    title: '购买价格(元)',
    key: 'payPrice',
    width: 100,
    align: 'center',
    render: (row: { payPrice: number }) => {
      return h('span', null, {default: () => (row.payPrice.toFixed(2))})
    }
  }, {
    title: '开始时间',
    key: 'startTime',
    width: 100,
  }, {
    title: '结束时间',
    key: 'endTime',
    width: 100,
  }, {
    title: '购买时间',
    key: 'createTime',
    width: 175,
  }, {
    title: '续费时间',
    key: 'renewalTime',
    width: 175,
  }, {
    title: '备注',
    key: 'remark',
  }
]);
//操作列
const actionColumn = reactive({
  width: 70,
  title: "操作",
  key: "action",
  fixed: "right",
  render(record: Recordable) {
    return h(DataTableAction, {
      actions: [
        {
          label: '停用',
          type: 'primary',
          popConfirm: NPopconfirm,
          onPositiveClick: handleUpStatus.bind(null, record),
          confirm: {
            text: '确定停用当前VIP吗？',
          },
          permission: ['user:vip:status']
        },
      ]
    });
  },
});
const handleSubmitSearch = () => {
  data_list.value.searchListData();
}
//停用vip
const handleUpStatus = (record: Recordable) => {
  postPutRequest('user/up_vip_status', {id: record.id, status: 0}).then((result: ResponseResult) => {
    if (result.code === 200) {
      message.success(result.message, {
        duration: 1500,
        onLeave() {
          data_list.value.reload();
        }
      })
    } else {
      message.error(result.message);
    }
  })
}

</script>
<style scoped lang="scss">

</style>